<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Vue 动画原理 | Guru Note</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="stylesheet" href="./font/index.css">
    <script src="/docs/icon/svg.js"></script>
    <meta name="description" content="Sea of dawn">
    
    <link rel="preload" href="/docs/assets/css/0.styles.efa081cd.css" as="style"><link rel="preload" href="/docs/assets/js/app.cdec4db9.js" as="script"><link rel="preload" href="/docs/assets/js/2.993bd611.js" as="script"><link rel="preload" href="/docs/assets/js/16.dec928ab.js" as="script"><link rel="preload" href="/docs/assets/js/7.5a12abef.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.c3177bdb.js"><link rel="prefetch" href="/docs/assets/js/100.60c23478.js"><link rel="prefetch" href="/docs/assets/js/101.7ea29e1b.js"><link rel="prefetch" href="/docs/assets/js/102.7f47e485.js"><link rel="prefetch" href="/docs/assets/js/103.ea9ce400.js"><link rel="prefetch" href="/docs/assets/js/104.4ec6a518.js"><link rel="prefetch" href="/docs/assets/js/105.75526347.js"><link rel="prefetch" href="/docs/assets/js/106.01f6b03b.js"><link rel="prefetch" href="/docs/assets/js/107.69fe0811.js"><link rel="prefetch" href="/docs/assets/js/108.fa23768b.js"><link rel="prefetch" href="/docs/assets/js/109.90df1698.js"><link rel="prefetch" href="/docs/assets/js/11.54347528.js"><link rel="prefetch" href="/docs/assets/js/110.dd8d7227.js"><link rel="prefetch" href="/docs/assets/js/111.ccf25ceb.js"><link rel="prefetch" href="/docs/assets/js/112.6963298f.js"><link rel="prefetch" href="/docs/assets/js/113.30ceb3d8.js"><link rel="prefetch" href="/docs/assets/js/114.42ef6603.js"><link rel="prefetch" href="/docs/assets/js/115.f1db7817.js"><link rel="prefetch" href="/docs/assets/js/116.92971223.js"><link rel="prefetch" href="/docs/assets/js/117.c5a65e7e.js"><link rel="prefetch" href="/docs/assets/js/118.e329035d.js"><link rel="prefetch" href="/docs/assets/js/119.cbb17c5e.js"><link rel="prefetch" href="/docs/assets/js/12.c8144ee8.js"><link rel="prefetch" href="/docs/assets/js/120.8537f6a6.js"><link rel="prefetch" href="/docs/assets/js/121.257d3851.js"><link rel="prefetch" href="/docs/assets/js/122.96a5f921.js"><link rel="prefetch" href="/docs/assets/js/123.2220fd12.js"><link rel="prefetch" href="/docs/assets/js/124.552b1a29.js"><link rel="prefetch" href="/docs/assets/js/125.4e36fe37.js"><link rel="prefetch" href="/docs/assets/js/126.3939cdcc.js"><link rel="prefetch" href="/docs/assets/js/127.014df434.js"><link rel="prefetch" href="/docs/assets/js/13.edc237a8.js"><link rel="prefetch" href="/docs/assets/js/14.66270d4f.js"><link rel="prefetch" href="/docs/assets/js/15.0804164b.js"><link rel="prefetch" href="/docs/assets/js/17.bbfc90a8.js"><link rel="prefetch" href="/docs/assets/js/18.76904860.js"><link rel="prefetch" href="/docs/assets/js/19.80a98011.js"><link rel="prefetch" href="/docs/assets/js/20.c39e42bd.js"><link rel="prefetch" href="/docs/assets/js/21.287b744a.js"><link rel="prefetch" href="/docs/assets/js/22.c9506be7.js"><link rel="prefetch" href="/docs/assets/js/23.9732a229.js"><link rel="prefetch" href="/docs/assets/js/24.21ed1f05.js"><link rel="prefetch" href="/docs/assets/js/25.8f1926f6.js"><link rel="prefetch" href="/docs/assets/js/26.61b6eb9f.js"><link rel="prefetch" href="/docs/assets/js/27.3706753c.js"><link rel="prefetch" href="/docs/assets/js/28.b6b182cf.js"><link rel="prefetch" href="/docs/assets/js/29.ae979ad9.js"><link rel="prefetch" href="/docs/assets/js/3.a7f8dd77.js"><link rel="prefetch" href="/docs/assets/js/30.f2233269.js"><link rel="prefetch" href="/docs/assets/js/31.06780314.js"><link rel="prefetch" href="/docs/assets/js/32.2dad91d1.js"><link rel="prefetch" href="/docs/assets/js/33.87ec6e22.js"><link rel="prefetch" href="/docs/assets/js/34.7b75f220.js"><link rel="prefetch" href="/docs/assets/js/35.3184991f.js"><link rel="prefetch" href="/docs/assets/js/36.28248fbe.js"><link rel="prefetch" href="/docs/assets/js/37.5824a979.js"><link rel="prefetch" href="/docs/assets/js/38.99a364fe.js"><link rel="prefetch" href="/docs/assets/js/39.a5f43732.js"><link rel="prefetch" href="/docs/assets/js/4.a55d89ed.js"><link rel="prefetch" href="/docs/assets/js/40.629f78f7.js"><link rel="prefetch" href="/docs/assets/js/41.e4f58d1c.js"><link rel="prefetch" href="/docs/assets/js/42.9f41aa47.js"><link rel="prefetch" href="/docs/assets/js/43.636412b6.js"><link rel="prefetch" href="/docs/assets/js/44.3b491aef.js"><link rel="prefetch" href="/docs/assets/js/45.77df19bc.js"><link rel="prefetch" href="/docs/assets/js/46.01f53ddd.js"><link rel="prefetch" href="/docs/assets/js/47.476e85c9.js"><link rel="prefetch" href="/docs/assets/js/48.198502dc.js"><link rel="prefetch" href="/docs/assets/js/49.0d59d332.js"><link rel="prefetch" href="/docs/assets/js/5.1597c0f8.js"><link rel="prefetch" href="/docs/assets/js/50.02baf101.js"><link rel="prefetch" href="/docs/assets/js/51.c9fbd54d.js"><link rel="prefetch" href="/docs/assets/js/52.4cb4459b.js"><link rel="prefetch" href="/docs/assets/js/53.248450d7.js"><link rel="prefetch" href="/docs/assets/js/54.83f12d1e.js"><link rel="prefetch" href="/docs/assets/js/55.b18accba.js"><link rel="prefetch" href="/docs/assets/js/56.8a160b09.js"><link rel="prefetch" href="/docs/assets/js/57.b854a940.js"><link rel="prefetch" href="/docs/assets/js/58.4500f315.js"><link rel="prefetch" href="/docs/assets/js/59.59400e36.js"><link rel="prefetch" href="/docs/assets/js/6.887ba020.js"><link rel="prefetch" href="/docs/assets/js/60.4dd5b5bb.js"><link rel="prefetch" href="/docs/assets/js/61.50d8c8f6.js"><link rel="prefetch" href="/docs/assets/js/62.17d10daa.js"><link rel="prefetch" href="/docs/assets/js/63.d5f821cc.js"><link rel="prefetch" href="/docs/assets/js/64.7bf2519f.js"><link rel="prefetch" href="/docs/assets/js/65.0a1c9bc8.js"><link rel="prefetch" href="/docs/assets/js/66.1bcaa81c.js"><link rel="prefetch" href="/docs/assets/js/67.326bdf9b.js"><link rel="prefetch" href="/docs/assets/js/68.2b3b63b2.js"><link rel="prefetch" href="/docs/assets/js/69.c9b1a1a9.js"><link rel="prefetch" href="/docs/assets/js/70.a5fede78.js"><link rel="prefetch" href="/docs/assets/js/71.288d9643.js"><link rel="prefetch" href="/docs/assets/js/72.8665d6b8.js"><link rel="prefetch" href="/docs/assets/js/73.47155429.js"><link rel="prefetch" href="/docs/assets/js/74.4d4738f8.js"><link rel="prefetch" href="/docs/assets/js/75.659a325f.js"><link rel="prefetch" href="/docs/assets/js/76.a263f692.js"><link rel="prefetch" href="/docs/assets/js/77.9d86d59e.js"><link rel="prefetch" href="/docs/assets/js/78.a41b5d88.js"><link rel="prefetch" href="/docs/assets/js/79.5d0fc4cc.js"><link rel="prefetch" href="/docs/assets/js/8.80d0c81d.js"><link rel="prefetch" href="/docs/assets/js/80.01a11f6a.js"><link rel="prefetch" href="/docs/assets/js/81.9c0207d9.js"><link rel="prefetch" href="/docs/assets/js/82.12be8e04.js"><link rel="prefetch" href="/docs/assets/js/83.00fa5f46.js"><link rel="prefetch" href="/docs/assets/js/84.f14cd53c.js"><link rel="prefetch" href="/docs/assets/js/85.e9d7c0d1.js"><link rel="prefetch" href="/docs/assets/js/86.eb78fbbf.js"><link rel="prefetch" href="/docs/assets/js/87.8a31f5ae.js"><link rel="prefetch" href="/docs/assets/js/88.0f10e6dc.js"><link rel="prefetch" href="/docs/assets/js/89.a17253c9.js"><link rel="prefetch" href="/docs/assets/js/9.2fa568cb.js"><link rel="prefetch" href="/docs/assets/js/90.e56bc609.js"><link rel="prefetch" href="/docs/assets/js/91.5277db18.js"><link rel="prefetch" href="/docs/assets/js/92.b0bb8aa7.js"><link rel="prefetch" href="/docs/assets/js/93.cd790b77.js"><link rel="prefetch" href="/docs/assets/js/94.76bbe227.js"><link rel="prefetch" href="/docs/assets/js/95.4f07ca32.js"><link rel="prefetch" href="/docs/assets/js/96.2b1e8485.js"><link rel="prefetch" href="/docs/assets/js/97.e93b3461.js"><link rel="prefetch" href="/docs/assets/js/98.658063a1.js"><link rel="prefetch" href="/docs/assets/js/99.a3642e6d.js">
    <link rel="stylesheet" href="/docs/assets/css/0.styles.efa081cd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><!----> <span class="site-name">Guru Note</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----> <svg aria-hidden="true" class="icon search-icon"><use xlink:href="#icon-search"></use></svg></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link router-link-active">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><div class="el-scrollbar"><div class="scrollbar-wrapper el-scrollbar__wrap el-scrollbar__wrap--hidden-default"><div class="el-scrollbar__view"><nav class="nav-links"><div class="nav-item"><a href="/docs/layout/" class="nav-link">
  CSS 手册
</a></div><div class="nav-item"><a href="/docs/js/" class="nav-link">
  JavaScript
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端进阶" class="dropdown-title"><span class="title">前端进阶</span> <span class="arrow down"></span></button> <button type="button" aria-label="前端进阶" class="mobile-dropdown-title"><span class="title">前端进阶</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          前端框架
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/vue/" class="nav-link router-link-active">
  Vue.js
</a></li><li class="dropdown-subitem"><a href="/docs/react/" class="nav-link">
  React.js
</a></li></ul></li><li class="dropdown-item"><h4>
          拓展语言
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/docs/node/" class="nav-link">
  Node.js
</a></li><li class="dropdown-subitem"><a href="/docs/ts/" class="nav-link">
  TypeScript
</a></li></ul></li></ul></div></div><div class="nav-item"><a href="/docs/devbook/" class="nav-link">
  开发手册
</a></div><div class="nav-item"><a href="/docs/exam/" class="nav-link">
  金九银十
</a></div><div class="nav-item"><a href="/docs/message/" class="nav-link">
  留言板
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/docs/vue/" aria-current="page" class="sidebar-link">说明</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Vue 2.0 全解</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/vue/options.html" class="sidebar-link">Vue 简介 &amp; 构造选项</a></li><li><a href="/docs/vue/responsive.html" class="sidebar-link">Vue 数据响应式</a></li><li><a href="/docs/vue/computed-and-watch.html" class="sidebar-link">Vue 计算属性和监听器</a></li><li><a href="/docs/vue/template-instruction-modifier.html" class="sidebar-link">Vue 模板、指令与修饰符</a></li><li><a href="/docs/vue/advanced-options.html" class="sidebar-link">Vue 进阶属性</a></li><li><a href="/docs/vue/prop.html" class="sidebar-link">Vue Prop 自定义属性</a></li><li><a href="/docs/vue/form-and-model.html" class="sidebar-link">Vue 表单与输入绑定</a></li><li><a href="/docs/vue/router.html" class="sidebar-link">Vue Router 的原理</a></li><li><a href="/docs/vue/transition.html" aria-current="page" class="active sidebar-link">Vue 动画原理</a></li><li><a href="/docs/vue/tree-component.html" class="sidebar-link">递归组件</a></li><li><a href="/docs/vue/plugin.html" class="sidebar-link">Vue 常用插件</a></li><li><a href="/docs/vue/create-project.html" class="sidebar-link">Vue 快速搭建项目</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>VuePress</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/vue/vuepress/started.html" class="sidebar-link">快速搭建文档</a></li><li><a href="/docs/vue/vuepress/markdown.html" class="sidebar-link">Markdown 语法拓展</a></li><li><a href="/docs/vue/vuepress/element-ui.html" class="sidebar-link">添加 Element 组件</a></li><li><a href="/docs/vue/vuepress/file-path.html" class="sidebar-link">关于文件路径</a></li></ul></section></li></ul> </div></div><div class="el-scrollbar__bar is-horizontal"><div class="el-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical"><div class="el-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div></div></aside> <main class="page"> <div class="re-page-top"><h1 class="title"><span>Vue 动画原理</span></h1> <div class="re-page-index"><div class="page-index-title"><span class="open-catalog"><svg aria-hidden="true" class="icon arrow-right"><use xlink:href="#icon-bold-right"></use></svg> <span class="text">目录</span></span></div> <div class="page-index-content"><div class="page-catalog" style="display:none;"><div class="synopsis-wrap"><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/vue/transition.html#使用类名过渡" class="synopsis-link">使用类名过渡</a></li><li class="synopsis-li"><a href="/docs/vue/transition.html#css-animation-动画" class="synopsis-link">CSS + animation 动画</a></li><li class="synopsis-li"><a href="/docs/vue/transition.html#指定-css-类名" class="synopsis-link">指定 CSS 类名</a><ul class="synopsis-ul"><li class="synopsis-li"><a href="/docs/vue/transition.html#animate-css-模块化引入" class="synopsis-link">Animate.css 模块化引入</a></li><li class="synopsis-li"><a href="/docs/vue/transition.html#使用-animate-css-4-0" class="synopsis-link">使用 Animate.css 4.0</a></li></ul></li><li class="synopsis-li"><a href="/docs/vue/transition.html#钩子函数" class="synopsis-link">钩子函数</a></li><li class="synopsis-li"><a href="/docs/vue/transition.html#初始渲染的过渡" class="synopsis-link">初始渲染的过渡</a></li><li class="synopsis-li"><a href="/docs/vue/transition.html#多个元素的过渡" class="synopsis-link">多个元素的过渡</a></li><li class="synopsis-li"><a href="/docs/vue/transition.html#拓展" class="synopsis-link">拓展</a></li></ul></div></div></div></div></div> <div class="theme-default-content content__default" data-v-2295aa91 data-v-2295aa91><h2 id="使用类名过渡" data-v-2295aa91><a href="#使用类名过渡" class="header-anchor" data-v-2295aa91>#</a> 使用类名过渡</h2> <p data-v-2295aa91>类名规则</p> <ol data-v-2295aa91><li data-v-2295aa91><strong data-v-2295aa91><code data-v-2295aa91>v-enter</code></strong> ：进入过渡时最开始的状态</li> <li data-v-2295aa91><strong data-v-2295aa91><code data-v-2295aa91>v-enter-active</code></strong> ：进入过渡的过渡效果，如 <code data-v-2295aa91>transition: all 0.3s;</code></li> <li data-v-2295aa91><code data-v-2295aa91>v-enter-to</code> ：进入过渡结束时的状态，如果不设置，则显示元素默认状态。</li> <li data-v-2295aa91><code data-v-2295aa91>v-leave</code> ：离开过渡时最开始的状态，如果不设置，则显示元素默认状态。</li> <li data-v-2295aa91><strong data-v-2295aa91><code data-v-2295aa91>v-leave-active</code></strong> ：离开过渡的过渡效果，如 <code data-v-2295aa91>transition: all 0.3s;</code></li> <li data-v-2295aa91><strong data-v-2295aa91><code data-v-2295aa91>v-leave-to</code></strong> ：离开过渡结束时的状态。</li></ol> <p data-v-2295aa91>使用案例</p> <div class="language-html extra-class" data-v-2295aa91><pre class="language-html" data-v-2295aa91><code data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>div</span> <span class="token attr-name" data-v-2295aa91>id</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>example-1<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>button</span> <span class="token attr-name" data-v-2295aa91>@click</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>show = !show<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
    Toggle render
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>button</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>transition</span> <span class="token attr-name" data-v-2295aa91>name</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>slide-fade<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
    <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>p</span> <span class="token attr-name" data-v-2295aa91>v-if</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>show<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>hello<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>p</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>transition</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>div</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
</code></pre></div><div class="language-js extra-class" data-v-2295aa91><pre class="language-js" data-v-2295aa91><code data-v-2295aa91><span class="token keyword" data-v-2295aa91>new</span> <span class="token class-name" data-v-2295aa91>Vue</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token punctuation" data-v-2295aa91>{</span>
  el<span class="token operator" data-v-2295aa91>:</span> <span class="token string" data-v-2295aa91>&quot;#example-1&quot;</span><span class="token punctuation" data-v-2295aa91>,</span>
  data<span class="token operator" data-v-2295aa91>:</span> <span class="token punctuation" data-v-2295aa91>{</span>
    show<span class="token operator" data-v-2295aa91>:</span> <span class="token boolean" data-v-2295aa91>true</span><span class="token punctuation" data-v-2295aa91>,</span>
  <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>
<span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>)</span><span class="token punctuation" data-v-2295aa91>;</span>
</code></pre></div><div class="language-css extra-class" data-v-2295aa91><pre class="language-css" data-v-2295aa91><code data-v-2295aa91><span class="token comment" data-v-2295aa91>/* 可以设置不同的进入和离开动画 */</span>
<span class="token comment" data-v-2295aa91>/* 设置持续时间和动画函数 */</span>
<span class="token selector" data-v-2295aa91>.slide-fade-enter-active</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token property" data-v-2295aa91>transition</span><span class="token punctuation" data-v-2295aa91>:</span> all 0.3s ease<span class="token punctuation" data-v-2295aa91>;</span>
<span class="token punctuation" data-v-2295aa91>}</span>
<span class="token selector" data-v-2295aa91>.slide-fade-leave-active</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token property" data-v-2295aa91>transition</span><span class="token punctuation" data-v-2295aa91>:</span> all 0.8s <span class="token function" data-v-2295aa91>cubic-bezier</span><span class="token punctuation" data-v-2295aa91>(</span>1<span class="token punctuation" data-v-2295aa91>,</span> 0.5<span class="token punctuation" data-v-2295aa91>,</span> 0.8<span class="token punctuation" data-v-2295aa91>,</span> 1<span class="token punctuation" data-v-2295aa91>)</span><span class="token punctuation" data-v-2295aa91>;</span>
<span class="token punctuation" data-v-2295aa91>}</span>
.slide-fade-enter<span class="token punctuation" data-v-2295aa91>,</span> .slide-fade-leave-to
<span class="token comment" data-v-2295aa91>/* .slide-fade-leave-active for below version 2.1.8 */</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token property" data-v-2295aa91>transform</span><span class="token punctuation" data-v-2295aa91>:</span> <span class="token function" data-v-2295aa91>translateX</span><span class="token punctuation" data-v-2295aa91>(</span>10px<span class="token punctuation" data-v-2295aa91>)</span><span class="token punctuation" data-v-2295aa91>;</span>
  <span class="token property" data-v-2295aa91>opacity</span><span class="token punctuation" data-v-2295aa91>:</span> 0<span class="token punctuation" data-v-2295aa91>;</span>
<span class="token punctuation" data-v-2295aa91>}</span>
</code></pre></div><section class="re-part" style="min-height:100px;" data-v-2295aa91><div id="example-1" data-v-2295aa91><button data-v-2295aa91>
      Toggle render
    </button> <p data-v-2295aa91 data-v-2295aa91>hello</p></div></section> <div class="custom-block tip" data-v-2295aa91><p class="custom-block-title" data-v-2295aa91>注意</p> <p data-v-2295aa91>类名过渡中的 <code data-v-2295aa91>v-leave</code> 存在 bug，想要精确的控制，最好使用下面的 JS 钩子函数过渡。</p></div> <h2 id="css-animation-动画" data-v-2295aa91><a href="#css-animation-动画" class="header-anchor" data-v-2295aa91>#</a> CSS + animation 动画</h2> <p data-v-2295aa91>还可以通过在 <code data-v-2295aa91>v-enter-active</code> 和 <code data-v-2295aa91>v-leave-active</code> 之间设置 animation 动画实现过渡。</p> <div class="language-html extra-class" data-v-2295aa91><pre class="language-html" data-v-2295aa91><code data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>div</span> <span class="token attr-name" data-v-2295aa91>id</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>example-2<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>button</span> <span class="token attr-name" data-v-2295aa91>@click</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>show = !show<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>Toggle show<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>button</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>transition</span> <span class="token attr-name" data-v-2295aa91>name</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>bounce<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
    <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>p</span> <span class="token attr-name" data-v-2295aa91>v-if</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>show<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
      真、假、浑浊、无瑕；起、落、精准、偏差；模糊年岁，似已蒸发，天地倒挂；若人间是场大梦啊，梦里啷当巨铁锁人家，夜归的人叩响了门环，我要不要叫醒他；
    <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>p</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>transition</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>div</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
</code></pre></div><div class="language-js extra-class" data-v-2295aa91><pre class="language-js" data-v-2295aa91><code data-v-2295aa91><span class="token keyword" data-v-2295aa91>new</span> <span class="token class-name" data-v-2295aa91>Vue</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token punctuation" data-v-2295aa91>{</span>
  el<span class="token operator" data-v-2295aa91>:</span> <span class="token string" data-v-2295aa91>&quot;#example-2&quot;</span><span class="token punctuation" data-v-2295aa91>,</span>
  data<span class="token operator" data-v-2295aa91>:</span> <span class="token punctuation" data-v-2295aa91>{</span>
    show<span class="token operator" data-v-2295aa91>:</span> <span class="token boolean" data-v-2295aa91>true</span><span class="token punctuation" data-v-2295aa91>,</span>
  <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>
<span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>)</span><span class="token punctuation" data-v-2295aa91>;</span>
</code></pre></div><div class="language-css extra-class" data-v-2295aa91><pre class="language-css" data-v-2295aa91><code data-v-2295aa91><span class="token selector" data-v-2295aa91>.bounce-enter-active</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token property" data-v-2295aa91>animation</span><span class="token punctuation" data-v-2295aa91>:</span> bounce-in 0.5s<span class="token punctuation" data-v-2295aa91>;</span>
<span class="token punctuation" data-v-2295aa91>}</span>
<span class="token selector" data-v-2295aa91>.bounce-leave-active</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token property" data-v-2295aa91>animation</span><span class="token punctuation" data-v-2295aa91>:</span> bounce-in 0.5s reverse<span class="token punctuation" data-v-2295aa91>;</span>
<span class="token punctuation" data-v-2295aa91>}</span>
<span class="token atrule" data-v-2295aa91><span class="token rule" data-v-2295aa91>@keyframes</span> bounce-in</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token selector" data-v-2295aa91>0%</span> <span class="token punctuation" data-v-2295aa91>{</span>
    <span class="token property" data-v-2295aa91>transform</span><span class="token punctuation" data-v-2295aa91>:</span> <span class="token function" data-v-2295aa91>scale</span><span class="token punctuation" data-v-2295aa91>(</span>0<span class="token punctuation" data-v-2295aa91>)</span><span class="token punctuation" data-v-2295aa91>;</span>
  <span class="token punctuation" data-v-2295aa91>}</span>
  <span class="token selector" data-v-2295aa91>50%</span> <span class="token punctuation" data-v-2295aa91>{</span>
    <span class="token property" data-v-2295aa91>transform</span><span class="token punctuation" data-v-2295aa91>:</span> <span class="token function" data-v-2295aa91>scale</span><span class="token punctuation" data-v-2295aa91>(</span>1.5<span class="token punctuation" data-v-2295aa91>)</span><span class="token punctuation" data-v-2295aa91>;</span>
  <span class="token punctuation" data-v-2295aa91>}</span>
  <span class="token selector" data-v-2295aa91>100%</span> <span class="token punctuation" data-v-2295aa91>{</span>
    <span class="token property" data-v-2295aa91>transform</span><span class="token punctuation" data-v-2295aa91>:</span> <span class="token function" data-v-2295aa91>scale</span><span class="token punctuation" data-v-2295aa91>(</span>1<span class="token punctuation" data-v-2295aa91>)</span><span class="token punctuation" data-v-2295aa91>;</span>
  <span class="token punctuation" data-v-2295aa91>}</span>
<span class="token punctuation" data-v-2295aa91>}</span>
</code></pre></div><section class="re-part" style="min-height:130px;" data-v-2295aa91><div id="example-2" data-v-2295aa91><button data-v-2295aa91>Toggle show</button> <p data-v-2295aa91 data-v-2295aa91>真、假、浑浊、无瑕；起、落、精准、偏差；模糊年岁，似已蒸发，天地倒挂；若人间是场大梦啊，梦里啷当巨铁锁人家，夜归的人叩响了门环，我要不要叫醒他；</p></div></section> <h2 id="指定-css-类名" data-v-2295aa91><a href="#指定-css-类名" class="header-anchor" data-v-2295aa91>#</a> 指定 CSS 类名</h2> <p data-v-2295aa91>还可以指定类名，结合其他第三方 CSS 动画库如 <a href="https://animate.style/" target="_blank" rel="noopener noreferrer" data-v-2295aa91>animate.css<span data-v-2295aa91><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 使用</p> <div class="language-html extra-class" data-v-2295aa91><pre class="language-html" data-v-2295aa91><code data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>link</span>
  <span class="token attr-name" data-v-2295aa91>href</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>https://cdn.jsdelivr.net/npm/animate.css@3.5.1<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91>rel</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>stylesheet<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91>type</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>text/css<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
<span class="token punctuation" data-v-2295aa91>/&gt;</span></span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>div</span> <span class="token attr-name" data-v-2295aa91>id</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>example-3<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>button</span> <span class="token attr-name" data-v-2295aa91>@click</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>show = !show<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
    Toggle render
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>button</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>transition</span>
    <span class="token attr-name" data-v-2295aa91>name</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>custom-classes-transition<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
    <span class="token attr-name" data-v-2295aa91>enter-active-class</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>animated bounceInLeft<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
    <span class="token attr-name" data-v-2295aa91>leave-active-class</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>animated bounceOutRight<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token punctuation" data-v-2295aa91>&gt;</span></span>
    <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>p</span> <span class="token attr-name" data-v-2295aa91>v-if</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>show<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>hello<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>p</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>transition</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>div</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
</code></pre></div><div class="language-js extra-class" data-v-2295aa91><pre class="language-js" data-v-2295aa91><code data-v-2295aa91><span class="token keyword" data-v-2295aa91>new</span> <span class="token class-name" data-v-2295aa91>Vue</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token punctuation" data-v-2295aa91>{</span>
  el<span class="token operator" data-v-2295aa91>:</span> <span class="token string" data-v-2295aa91>&quot;#example-3&quot;</span><span class="token punctuation" data-v-2295aa91>,</span>
  data<span class="token operator" data-v-2295aa91>:</span> <span class="token punctuation" data-v-2295aa91>{</span>
    show<span class="token operator" data-v-2295aa91>:</span> <span class="token boolean" data-v-2295aa91>true</span><span class="token punctuation" data-v-2295aa91>,</span>
  <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>
<span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>)</span><span class="token punctuation" data-v-2295aa91>;</span>
</code></pre></div><section class="re-part" style="min-height:100px;overflow:hidden;" data-v-2295aa91><div id="example-3" data-v-2295aa91><button data-v-2295aa91>
      Toggle render
    </button> <p data-v-2295aa91 data-v-2295aa91>hello</p></div></section> <h3 id="animate-css-模块化引入" data-v-2295aa91><a href="#animate-css-模块化引入" class="header-anchor" data-v-2295aa91>#</a> Animate.css 模块化引入</h3> <p data-v-2295aa91>安装</p> <div class="language-js extra-class" data-v-2295aa91><pre class="language-js" data-v-2295aa91><code data-v-2295aa91>yarn add animate<span class="token punctuation" data-v-2295aa91>.</span>css
</code></pre></div><p data-v-2295aa91>引入 4.x</p> <div class="language-js extra-class" data-v-2295aa91><pre class="language-js" data-v-2295aa91><code data-v-2295aa91><span class="token comment" data-v-2295aa91>// 1. 组件化引入</span>
<span class="token keyword" data-v-2295aa91>import</span> animate <span class="token keyword" data-v-2295aa91>from</span> <span class="token string" data-v-2295aa91>&quot;animate.css&quot;</span><span class="token punctuation" data-v-2295aa91>;</span>
Vue<span class="token punctuation" data-v-2295aa91>.</span><span class="token function" data-v-2295aa91>use</span><span class="token punctuation" data-v-2295aa91>(</span>animate<span class="token punctuation" data-v-2295aa91>)</span><span class="token punctuation" data-v-2295aa91>;</span>
</code></pre></div><div class="language-js extra-class" data-v-2295aa91><pre class="language-js" data-v-2295aa91><code data-v-2295aa91><span class="token comment" data-v-2295aa91>// 2. 或直接引入 css</span>
<span class="token keyword" data-v-2295aa91>import</span> <span class="token string" data-v-2295aa91>&quot;animate.min.css&quot;</span><span class="token punctuation" data-v-2295aa91>;</span>
</code></pre></div><p data-v-2295aa91>引入 3.x</p> <div class="language-js extra-class" data-v-2295aa91><pre class="language-js" data-v-2295aa91><code data-v-2295aa91><span class="token keyword" data-v-2295aa91>import</span> <span class="token string" data-v-2295aa91>&quot;animate.css/animate.compat.css&quot;</span><span class="token punctuation" data-v-2295aa91>;</span>
</code></pre></div><h3 id="使用-animate-css-4-0" data-v-2295aa91><a href="#使用-animate-css-4-0" class="header-anchor" data-v-2295aa91>#</a> 使用 Animate.css 4.0</h3> <p data-v-2295aa91>由于 Animate.css 4.0 更新后改变了类名，使用的时候需要添加 <code data-v-2295aa91>animate__</code> 前缀使用</p> <div class="language-vue extra-class" data-v-2295aa91><pre class="language-vue" data-v-2295aa91><code data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>div</span> <span class="token attr-name" data-v-2295aa91>id</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>app<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>button</span> <span class="token attr-name" data-v-2295aa91>@click</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>show = !show<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
    Toggle render
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>button</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>transition</span>
    <span class="token attr-name" data-v-2295aa91>name</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>custom-classes-transition<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
    <span class="token attr-name" data-v-2295aa91>enter-active-class</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>animate__animated animate__bounceInLeft<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
    <span class="token attr-name" data-v-2295aa91>leave-active-class</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>animate__animated animate__bounceOutRight<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token punctuation" data-v-2295aa91>&gt;</span></span>
    <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>p</span> <span class="token attr-name" data-v-2295aa91>v-if</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>show<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>hello<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>p</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>transition</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>div</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
</code></pre></div><h2 id="钩子函数" data-v-2295aa91><a href="#钩子函数" class="header-anchor" data-v-2295aa91>#</a> 钩子函数</h2> <p data-v-2295aa91>可以在 attribute 中声明 JavaScript 钩子</p> <div class="language-vue extra-class" data-v-2295aa91><pre class="language-vue" data-v-2295aa91><code data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>transition</span>
  <span class="token attr-name" data-v-2295aa91>@before-enter</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>beforeEnter<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91>@enter</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>enter<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91>@after-enter</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>afterEnter<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91>@enter-cancelled</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>enterCancelled<span class="token punctuation" data-v-2295aa91>&quot;</span></span>

  <span class="token attr-name" data-v-2295aa91>@before-leave</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>beforeLeave<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91>@leave</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>leave<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91>@after-leave</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>afterLeave<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91>@leave-cancelled</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>leaveCancelled<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
<span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token comment" data-v-2295aa91>&lt;!-- ... --&gt;</span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>transition</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
</code></pre></div><div class="language-js extra-class" data-v-2295aa91><pre class="language-js" data-v-2295aa91><code data-v-2295aa91>methods<span class="token operator" data-v-2295aa91>:</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token comment" data-v-2295aa91>// === 进入时 ===</span>
  <span class="token function" data-v-2295aa91>beforeEnter</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token parameter" data-v-2295aa91>el</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>
  <span class="token comment" data-v-2295aa91>// 当与 CSS 结合使用时</span>
  <span class="token comment" data-v-2295aa91>// 回调函数 done 是可选的</span>
  <span class="token function" data-v-2295aa91>enter</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token parameter" data-v-2295aa91>el<span class="token punctuation" data-v-2295aa91>,</span> done</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span> <span class="token function" data-v-2295aa91>done</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>
  <span class="token function" data-v-2295aa91>afterEnter</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token parameter" data-v-2295aa91>el</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>
  <span class="token function" data-v-2295aa91>enterCancelled</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token parameter" data-v-2295aa91>el</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>

  <span class="token comment" data-v-2295aa91>// === 离开时 ===</span>
  <span class="token function" data-v-2295aa91>beforeLeave</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token parameter" data-v-2295aa91>el</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>
  <span class="token comment" data-v-2295aa91>// 当与 CSS 结合使用时</span>
  <span class="token comment" data-v-2295aa91>// 回调函数 done 是可选的</span>
  <span class="token function" data-v-2295aa91>leave</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token parameter" data-v-2295aa91>el<span class="token punctuation" data-v-2295aa91>,</span> done</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span> <span class="token function" data-v-2295aa91>done</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>
  <span class="token function" data-v-2295aa91>afterLeave</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token parameter" data-v-2295aa91>el</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>
  <span class="token comment" data-v-2295aa91>// leaveCancelled 只用于 v-show 中</span>
  <span class="token function" data-v-2295aa91>leaveCancelled</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token parameter" data-v-2295aa91>el</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span> <span class="token punctuation" data-v-2295aa91>}</span>
<span class="token punctuation" data-v-2295aa91>}</span>
</code></pre></div><p data-v-2295aa91>还可以结合第三方库 Velocity.js 使用</p> <div class="language-vue extra-class" data-v-2295aa91><pre class="language-vue" data-v-2295aa91><code data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>div</span> <span class="token attr-name" data-v-2295aa91>id</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>example-4<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>button</span> <span class="token attr-name" data-v-2295aa91>@click</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>show = !show<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>Toggle<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>button</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>transition</span>
    <span class="token attr-name" data-v-2295aa91>appear</span>
    <span class="token attr-name" data-v-2295aa91>@enter</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>enter<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
    <span class="token attr-name" data-v-2295aa91>@leave</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>leave<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
    <span class="token attr-name" data-v-2295aa91>:css</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>false<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token punctuation" data-v-2295aa91>&gt;</span></span>
    <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>div</span> <span class="token attr-name" data-v-2295aa91>v-if</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>show<span class="token punctuation" data-v-2295aa91>&quot;</span></span> <span class="token attr-name" data-v-2295aa91>class</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>demo-4<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>div</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>transition</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>div</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
</code></pre></div><div class="language-js extra-class" data-v-2295aa91><pre class="language-js" data-v-2295aa91><code data-v-2295aa91><span class="token function" data-v-2295aa91>data</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token keyword" data-v-2295aa91>return</span> <span class="token punctuation" data-v-2295aa91>{</span>
    show<span class="token operator" data-v-2295aa91>:</span> <span class="token boolean" data-v-2295aa91>true</span>
  <span class="token punctuation" data-v-2295aa91>}</span>
<span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>
methods<span class="token operator" data-v-2295aa91>:</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token comment" data-v-2295aa91>// 进入过渡回调</span>
  <span class="token function" data-v-2295aa91>enter</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token parameter" data-v-2295aa91>el<span class="token punctuation" data-v-2295aa91>,</span> done</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span>
    <span class="token function" data-v-2295aa91>Velocity</span><span class="token punctuation" data-v-2295aa91>(</span>el<span class="token punctuation" data-v-2295aa91>,</span> <span class="token punctuation" data-v-2295aa91>{</span> width<span class="token operator" data-v-2295aa91>:</span> <span class="token string" data-v-2295aa91>'300px'</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span> <span class="token punctuation" data-v-2295aa91>{</span> duration<span class="token operator" data-v-2295aa91>:</span> <span class="token number" data-v-2295aa91>300</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>)</span>
    <span class="token function" data-v-2295aa91>Velocity</span><span class="token punctuation" data-v-2295aa91>(</span>el<span class="token punctuation" data-v-2295aa91>,</span> <span class="token punctuation" data-v-2295aa91>{</span> height<span class="token operator" data-v-2295aa91>:</span> <span class="token string" data-v-2295aa91>'300px;'</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span> <span class="token punctuation" data-v-2295aa91>{</span> duration<span class="token operator" data-v-2295aa91>:</span> <span class="token number" data-v-2295aa91>300</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span> <span class="token punctuation" data-v-2295aa91>{</span> complete<span class="token operator" data-v-2295aa91>:</span> done <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>)</span>
  <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span>
  <span class="token comment" data-v-2295aa91>// 离开过渡回调</span>
  <span class="token function" data-v-2295aa91>leave</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token parameter" data-v-2295aa91>el<span class="token punctuation" data-v-2295aa91>,</span> done</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span>
    <span class="token function" data-v-2295aa91>Velocity</span><span class="token punctuation" data-v-2295aa91>(</span>el<span class="token punctuation" data-v-2295aa91>,</span> <span class="token punctuation" data-v-2295aa91>{</span> height<span class="token operator" data-v-2295aa91>:</span> <span class="token string" data-v-2295aa91>'150px'</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span> <span class="token punctuation" data-v-2295aa91>{</span> duration<span class="token operator" data-v-2295aa91>:</span> <span class="token number" data-v-2295aa91>300</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>)</span>
    <span class="token function" data-v-2295aa91>Velocity</span><span class="token punctuation" data-v-2295aa91>(</span>el<span class="token punctuation" data-v-2295aa91>,</span> <span class="token punctuation" data-v-2295aa91>{</span> width<span class="token operator" data-v-2295aa91>:</span> <span class="token string" data-v-2295aa91>'0px'</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span> <span class="token punctuation" data-v-2295aa91>{</span> duration<span class="token operator" data-v-2295aa91>:</span> <span class="token number" data-v-2295aa91>300</span> <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>,</span> <span class="token punctuation" data-v-2295aa91>{</span> complete<span class="token operator" data-v-2295aa91>:</span> done <span class="token punctuation" data-v-2295aa91>}</span><span class="token punctuation" data-v-2295aa91>)</span>
  <span class="token punctuation" data-v-2295aa91>}</span>
<span class="token punctuation" data-v-2295aa91>}</span>
</code></pre></div><div class="language-css extra-class" data-v-2295aa91><pre class="language-css" data-v-2295aa91><code data-v-2295aa91><span class="token selector" data-v-2295aa91>.demo-4</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token property" data-v-2295aa91>width</span><span class="token punctuation" data-v-2295aa91>:</span> 0<span class="token punctuation" data-v-2295aa91>;</span>
  <span class="token property" data-v-2295aa91>height</span><span class="token punctuation" data-v-2295aa91>:</span> 150px<span class="token punctuation" data-v-2295aa91>;</span>
  <span class="token property" data-v-2295aa91>overflow</span><span class="token punctuation" data-v-2295aa91>:</span> hidden<span class="token punctuation" data-v-2295aa91>;</span>
  <span class="token property" data-v-2295aa91>background-color</span><span class="token punctuation" data-v-2295aa91>:</span> #eee<span class="token punctuation" data-v-2295aa91>;</span>
<span class="token punctuation" data-v-2295aa91>}</span>
</code></pre></div><section class="re-part" data-v-2295aa91><div id="example-4" data-v-2295aa91><button data-v-2295aa91>Toggle</button> <div class="demo4" data-v-2295aa91 data-v-2295aa91></div></div></section> <h2 id="初始渲染的过渡" data-v-2295aa91><a href="#初始渲染的过渡" class="header-anchor" data-v-2295aa91>#</a> 初始渲染的过渡</h2> <p data-v-2295aa91>transition 还支持第一次加载过渡，只要添加一个 <code data-v-2295aa91>appear</code> 属性</p> <div class="language-vue extra-class" data-v-2295aa91><pre class="language-vue" data-v-2295aa91><code data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>transition</span> <span class="token attr-name" data-v-2295aa91>appear</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token comment" data-v-2295aa91>&lt;!-- ... --&gt;</span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>transition</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
</code></pre></div><p data-v-2295aa91>和进入 / 离开过渡一样 <code data-v-2295aa91>appear</code> 属性也支持自定义类名</p> <div class="language-vue extra-class" data-v-2295aa91><pre class="language-vue" data-v-2295aa91><code data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>transition</span>
  <span class="token attr-name" data-v-2295aa91>appear</span>
  <span class="token attr-name" data-v-2295aa91>appear-class</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>custom-appear-class<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91>appear-to-class</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>custom-appear-to-class<span class="token punctuation" data-v-2295aa91>&quot;</span></span> <span class="token attr-name" data-v-2295aa91>(2.1.8+)</span>
  <span class="token attr-name" data-v-2295aa91>appear-active-class</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>custom-appear-active-class<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
<span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token comment" data-v-2295aa91>&lt;!-- ... --&gt;</span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>transition</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
</code></pre></div><p data-v-2295aa91>且支持自定义 JavaScript 钩子：</p> <div class="language-vue extra-class" data-v-2295aa91><pre class="language-vue" data-v-2295aa91><code data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>transition</span>
  <span class="token attr-name" data-v-2295aa91>appear</span>
  <span class="token attr-name" data-v-2295aa91><span class="token namespace" data-v-2295aa91>v-on:</span>before-appear</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>customBeforeAppearHook<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91><span class="token namespace" data-v-2295aa91>v-on:</span>appear</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>customAppearHook<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91><span class="token namespace" data-v-2295aa91>v-on:</span>after-appear</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>customAfterAppearHook<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
  <span class="token attr-name" data-v-2295aa91><span class="token namespace" data-v-2295aa91>v-on:</span>appear-cancelled</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>customAppearCancelledHook<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
<span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token comment" data-v-2295aa91>&lt;!-- ... --&gt;</span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>transition</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
</code></pre></div><h2 id="多个元素的过渡" data-v-2295aa91><a href="#多个元素的过渡" class="header-anchor" data-v-2295aa91>#</a> 多个元素的过渡</h2> <p data-v-2295aa91>默认情况下 transition 中如果有多组件，过渡会一起执行，结合绝对定位，就可以实现无缝的过渡</p> <div class="custom-block tip" data-v-2295aa91><p class="custom-block-title" data-v-2295aa91>注意</p> <p data-v-2295aa91>多组件过渡需要给每个组件添加唯一的 <code data-v-2295aa91>key</code> 属性</p></div> <div class="language-vue extra-class" data-v-2295aa91><pre class="language-vue" data-v-2295aa91><code data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>div</span> <span class="token attr-name" data-v-2295aa91>id</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>example-5<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>transition</span> <span class="token attr-name" data-v-2295aa91>name</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>fade<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
    <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>button</span>
      <span class="token attr-name" data-v-2295aa91>v-if</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>status === <span class="token punctuation" data-v-2295aa91>'</span>off<span class="token punctuation" data-v-2295aa91>'</span><span class="token punctuation" data-v-2295aa91>&quot;</span></span>
      <span class="token attr-name" data-v-2295aa91>key</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>off<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
      <span class="token attr-name" data-v-2295aa91>@click</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>status = <span class="token punctuation" data-v-2295aa91>'</span>on<span class="token punctuation" data-v-2295aa91>'</span><span class="token punctuation" data-v-2295aa91>&quot;</span></span>
    <span class="token punctuation" data-v-2295aa91>&gt;</span></span>off<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>button</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
    <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>button</span>
      <span class="token attr-name" data-v-2295aa91>v-else-if</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>status === <span class="token punctuation" data-v-2295aa91>'</span>on<span class="token punctuation" data-v-2295aa91>'</span><span class="token punctuation" data-v-2295aa91>&quot;</span></span>
      <span class="token attr-name" data-v-2295aa91>key</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>on<span class="token punctuation" data-v-2295aa91>&quot;</span></span>
      <span class="token attr-name" data-v-2295aa91>@click</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>status = <span class="token punctuation" data-v-2295aa91>'</span>off<span class="token punctuation" data-v-2295aa91>'</span><span class="token punctuation" data-v-2295aa91>&quot;</span></span>
    <span class="token punctuation" data-v-2295aa91>&gt;</span></span>on<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>button</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>transition</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>div</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
</code></pre></div><div class="language-js extra-class" data-v-2295aa91><pre class="language-js" data-v-2295aa91><code data-v-2295aa91><span class="token function" data-v-2295aa91>data</span><span class="token punctuation" data-v-2295aa91>(</span><span class="token punctuation" data-v-2295aa91>)</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token keyword" data-v-2295aa91>return</span> <span class="token punctuation" data-v-2295aa91>{</span>
    status<span class="token operator" data-v-2295aa91>:</span> <span class="token string" data-v-2295aa91>'off'</span>
  <span class="token punctuation" data-v-2295aa91>}</span>
<span class="token punctuation" data-v-2295aa91>}</span>
</code></pre></div><div class="language-css extra-class" data-v-2295aa91><pre class="language-css" data-v-2295aa91><code data-v-2295aa91><span class="token selector" data-v-2295aa91>#example-5</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token property" data-v-2295aa91>position</span><span class="token punctuation" data-v-2295aa91>:</span> relative<span class="token punctuation" data-v-2295aa91>;</span>
<span class="token punctuation" data-v-2295aa91>}</span>
<span class="token selector" data-v-2295aa91>button</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token property" data-v-2295aa91>position</span><span class="token punctuation" data-v-2295aa91>:</span> absolute<span class="token punctuation" data-v-2295aa91>;</span>
<span class="token punctuation" data-v-2295aa91>}</span>

<span class="token selector" data-v-2295aa91>.fade-enter-active, .fade-leave-active</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token property" data-v-2295aa91>transition</span><span class="token punctuation" data-v-2295aa91>:</span> all 1s<span class="token punctuation" data-v-2295aa91>;</span>
<span class="token punctuation" data-v-2295aa91>}</span>
<span class="token selector" data-v-2295aa91>.fade-enter</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token property" data-v-2295aa91>transform</span><span class="token punctuation" data-v-2295aa91>:</span> <span class="token function" data-v-2295aa91>translateX</span><span class="token punctuation" data-v-2295aa91>(</span>100%<span class="token punctuation" data-v-2295aa91>)</span><span class="token punctuation" data-v-2295aa91>;</span>
  <span class="token property" data-v-2295aa91>opacity</span><span class="token punctuation" data-v-2295aa91>:</span> 0<span class="token punctuation" data-v-2295aa91>;</span>
<span class="token punctuation" data-v-2295aa91>}</span>
<span class="token selector" data-v-2295aa91>.fade-leave-to</span> <span class="token punctuation" data-v-2295aa91>{</span>
  <span class="token property" data-v-2295aa91>transform</span><span class="token punctuation" data-v-2295aa91>:</span> <span class="token function" data-v-2295aa91>translateX</span><span class="token punctuation" data-v-2295aa91>(</span>-100%<span class="token punctuation" data-v-2295aa91>)</span><span class="token punctuation" data-v-2295aa91>;</span>
  <span class="token property" data-v-2295aa91>opacity</span><span class="token punctuation" data-v-2295aa91>:</span> 0<span class="token punctuation" data-v-2295aa91>;</span>
<span class="token punctuation" data-v-2295aa91>}</span>
</code></pre></div><section class="re-part" data-v-2295aa91><div class="example-5" style="min-height:40px;" data-v-2295aa91><button data-v-2295aa91 data-v-2295aa91>off</button></div></section> <p data-v-2295aa91>Vue 还提供了 <strong data-v-2295aa91>过渡模式</strong></p> <ul data-v-2295aa91><li data-v-2295aa91><code data-v-2295aa91>in-out</code>：新元素先进行过渡，完成之后当前元素过渡离开。</li> <li data-v-2295aa91><code data-v-2295aa91>out-in</code>：当前元素先进行过渡，完成之后新元素过渡进入。</li></ul> <p data-v-2295aa91>用 in-out 添加一个开关按钮过渡：</p> <div class="language-vue extra-class" data-v-2295aa91><pre class="language-vue" data-v-2295aa91><code data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;</span>transition</span> <span class="token attr-name" data-v-2295aa91>name</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>fade<span class="token punctuation" data-v-2295aa91>&quot;</span></span> <span class="token attr-name" data-v-2295aa91>mode</span><span class="token attr-value" data-v-2295aa91><span class="token punctuation attr-equals" data-v-2295aa91>=</span><span class="token punctuation" data-v-2295aa91>&quot;</span>in-out<span class="token punctuation" data-v-2295aa91>&quot;</span></span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
  <span class="token comment" data-v-2295aa91>&lt;!-- ... the buttons ... --&gt;</span>
<span class="token tag" data-v-2295aa91><span class="token tag" data-v-2295aa91><span class="token punctuation" data-v-2295aa91>&lt;/</span>transition</span><span class="token punctuation" data-v-2295aa91>&gt;</span></span>
</code></pre></div><p data-v-2295aa91>就会实现类似发牌的效果</p> <section class="re-part" data-v-2295aa91><div class="example-5" style="min-height:40px;" data-v-2295aa91><button data-v-2295aa91 data-v-2295aa91>off</button></div></section> <h2 id="拓展" data-v-2295aa91><a href="#拓展" class="header-anchor" data-v-2295aa91>#</a> 拓展</h2> <ul data-v-2295aa91><li data-v-2295aa91><a href="https://cn.vuejs.org/v2/guide/transitions.html#%E5%88%97%E8%A1%A8%E8%BF%87%E6%B8%A1" target="_blank" rel="noopener noreferrer" data-v-2295aa91>列表过渡<span data-v-2295aa91><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新：</span><span class="time">2021-02-10 12:44</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><svg aria-hidden="true" class="icon"><use xlink:href="#icon-left"></use></svg> <a href="/docs/vue/router.html" class="prev">Vue Router 的原理</a></span> <span class="next"><a href="/docs/vue/tree-component.html">递归组件</a> <svg aria-hidden="true" class="icon"><use xlink:href="#icon-right"></use></svg></span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/docs/assets/js/app.cdec4db9.js" defer></script><script src="/docs/assets/js/2.993bd611.js" defer></script><script src="/docs/assets/js/16.dec928ab.js" defer></script><script src="/docs/assets/js/7.5a12abef.js" defer></script>
  </body>
</html>
